<!-- 护理项目列表页 -->
<template>
  <div class="baseList">
    <div class="newBox">
      <button class="bt wt-120" @click="handleBulid()">新增护理项目</button>
    </div>
    <div class="tableBoxs">
      <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
      <t-table
        row-key="index"
        :data="data"
        :columns="COLUMNS"
        :bordered="bordered"
        :hover="hover"
        :size="size"
        cell-empty-content="-"
        resizable
        lazy-load
      >
        <template #image="{ row }">
          <!-- 图片预览及展示 -->
          <div class="tdesign-demo-image-viewer__base">
            <t-image-viewer :images="[row.image]">
              <template #trigger="{ open }">
                <div class="tdesign-demo-image-viewer__ui-image">
                  <img
                    alt="test"
                    :src="row.image"
                    class="tdesign-demo-image-viewer__ui-image--img"
                  />
                  <div
                    class="tdesign-demo-image-viewer__ui-image--hover"
                    @click="open"
                  >
                    <span> <BrowseIcon size="1.4em" /> 预览 </span>
                  </div>
                </div>
              </template>
            </t-image-viewer>
          </div>
        </template>
        <!-- 价格拼接 -->
        <template #price="{ row }">
          {{ row.price.toFixed(2) }}
        </template>
        <!-- 操作栏 -->
        <template #op="{ row }">
          <div class="operateCon">
            <a
              class="btn-dl"
              :class="row.count > 0 ? 'disabled' : ''"
              @click="handleClickDelete(row)"
              >删除</a
            >
            <a
              class="font-bt"
              :class="row.count > 0 ? 'disabled' : ''"
              @click="handleEdit(row.id)"
              >编辑</a
            >
            <a
              class="delete"
              :class="
                row.count > 0 && row.status === 1
                  ? 'disabled btn-dl'
                  : row.status === 1
                  ? 'btn-dl'
                  : 'font-bt'
              "
              @click="handleForbidden(row)"
              >{{ row.status === 1 ? '禁用' : '启用' }}</a
            >
          </div>
        </template>
        <!-- 序号 -->
        <template #rowIndex="{ rowIndex }">{{
          (pagination.pageNum - 1) * pagination.pageSize + (rowIndex + 1)
        }}</template>
      </t-table>
      <t-pagination
        v-if="total > 4"
        v-model="pagination.pageNum"
        v-model:pageSize="pagination.pageSize"
        :total="total"
        @change="onPageChange"
      />
    </div>
  </div>
</template>

<script setup lang="jsx">
import { COLUMNS } from '../constants'
const props = defineProps({
  data: {
    type: Object,
    default: []
  },
  bordered: Boolean,
  hover: Boolean,
  size: Number,
  total: Number,
  pagination: {
    type: Object,
    default: {}
  }
})
const emits = defineEmits([
  'onPageChange',
  'handleBulid',
  'handleEdit',
  'handleClickDelete',
  'handleForbidden'
])
const onPageChange = (pageInfo) => {
  emits('onPageChange', pageInfo)
}
//新增
const handleBulid = () => {
  emits('handleBulid')
}
//编辑
const handleEdit = (id) => {
  emits('handleEdit', id)
}
// 点击删除
const handleClickDelete = (val) => {
  if (!val.count) {
    emits('handleClickDelete', val)
  }
}
// 禁用
const handleForbidden = (val) => {
  if (!val.count) {
    emits('handleForbidden', val)
  }
}
</script>
